<template>
  <div class="main_bottom">
    <div class="main_bottom_top">
      <div class="main_bottom_top_list">
        <img src="../../../assets/001/main_bottopm_top1.png" />
        <div class="main_bottom_t_l_title">XX指南</div>
        <div class="main_bottom_t_l_con" style="top: -15px">
          <div class="main_bottom_t_l_main">
            <dv-scroll-board
              class="dv-scr-board"
              :config="config"
              style="width: 100%; height: 90px"
            />
          </div>
        </div>
      </div>
      <div class="main_bottom_top_list">
        <img src="../../../assets/001/main_bottopm_top2.png" />
        <div class="main_bottom_t_l_title">XXXX公开占比</div>
        <div ref="departmentId" class="main_bottom_t_l_chart"></div>
      </div>
      <div class="main_bottom_top_list">
        <img src="../../../assets/001/main_bottopm_top1.png" />
        <div class="main_bottom_t_l_title">政策XX</div>
        <div class="main_bottom_t_l_con" style="top: -15px">
          <div class="main_bottom_t_l_main2">
            <dv-scroll-board
              class="dv-scr-board"
              :config="config"
              style="width: 100%; height: 90px"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="main_bottom_bottom">
      <div class="main_bottom_b_left">
        <img src="../../../assets/001/main_bottom_bottom.png" />
        <div class="main_bottom_b_title">更多免费精品模板关注公众号</div>
        <div ref="coverageId" class="main_bottom_b_con"></div>
      </div>
      <div class="main_bottom_b_middle1">
        <img src="../../../assets/001/main_bootm_middle.png" />
        <div class="main_bottom_b_title">关注XXXX占比</div>
        <div ref="contentId" class="main_bottom_b_con main_bottom_b_con2"></div>
      </div>
      <div class="main_bottom_b_middle2">
        <img src="../../../assets/001/main_bootm_middle.png" />
        <div class="main_bottom_b_title">XXXX发布量</div>
        <div
          ref="publicNumId"
          class="main_bottom_b_con main_bottom_b_con2"
        ></div>
      </div>
      <div class="main_bottom_b_right">
        <img src="../../../assets/001/main_bottom_bottom.png" />
        <div class="main_bottom_b_title">XXX公开数量</div>
        <div ref="yearsNumId" class="main_bottom_b_con"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
const config = reactive({
  header: ["标题", "日期"],
  data: [
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
    ["更多免费精品模板关注公众号“DreamCoders”", "2023/05/20"],
  ],
  rowNum: 4, //表格行数
  headerHeight: 0,
  headerBGC: "#fff", // 表头背景色
  oddRowBGC: "#1c3d74", // 奇数行背景色
  evenRowBGC: "#1c3d74", // 偶数行背景色
  // index: true,
  columnWidth: [300],
  align: ["left"],
});

const departmentId = ref(null);
const coverageId = ref(null);
const contentId = ref(null);
const publicNumId = ref(null);
const yearsNumId = ref(null);

onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  drawDepartmentChart();
  drawCoverageChart();
  drawContentChart();
  drawPublicNumChart();
  drawYearsNumChart();
});
const drawDepartmentChart = () => {
  var dataArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
  ];
  var departmentChart = echarts.init(departmentId.value);
  var data = dataArr;
  var option = {
    color: ["#FD9133", "#47F6A2", "#37D2D4", "#3493FF"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      itemWidth: 15, // 标志图形的长度
      itemHeight: 15, // 标志图形的宽度
      orient: "vertical",
      // left: 'right',
      top: "30%",
      bottom: "50%",
      x: "5%",
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
      data: data,
    },
    series: [
      {
        name: "XXXX公开占比",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["78%", "52%"],
        labelLine: {
          normal: {
            length: 12,
            lineStyle: {
              type: "solid",
              color: "#0EFCFF",
            },
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return params.name;
            },
            borderWidth: 0,
            borderRadius: 4,
            padding: [0, 0],
            height: 20,
            fontSize: 8,
            align: "center",
            color: "#0EFCFF",
          },
        },
        data: data,
      },
      {
        color: "#0EFCFF",
        type: "pie",
        radius: ["55", "56"],
        center: ["78%", "52%"],
        data: [100],
        label: {
          show: false,
        },
      },
      {
        color: "#0EFCFF",
        type: "pie",
        radius: ["25", "26"],
        center: ["78%", "52%"],
        data: [100],
        label: {
          show: false,
        },
      },
    ],
  };
  departmentChart.setOption(option);
  setInterval(function () {
    departmentChart.clear();
    departmentChart.setOption(option);
  }, 6000);
};
const drawCoverageChart = () => {
  var resArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
    { name: "测试66", value: 800 },
  ];
  var indicatorArr = [];
  var numArr = [];
  for (var i = 0; i < resArr.length; i++) {
    indicatorArr.push({ name: resArr[i].name, max: 900 });
    numArr.push(resArr[i].value);
  }
  var data = [
    {
      value: numArr,
    },
  ];
  var coverageChart = echarts.init(coverageId.value);
  var option = {
    legend: {
      show: true,
      icon: "circle",
      bottom: 30,
      center: 0,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 21,
      orient: "horizontal",
      data: ["a", "b"],
      textStyle: {
        fontSize: "70%",
        color: "#0EFCFF",
      },
    },

    radar: {
      // shape: 'circle',
      radius: "70%",
      triggerEvent: true,
      // type: 'default',
      name: {
        textStyle: {
          color: "#39DCF4",
          fontSize: "10",
          // borderRadius: 3,
          padding: [10, 10],
        },
      },
      nameGap: "2",
      indicator: indicatorArr,
      splitArea: {
        areaStyle: {
          color: "rgba(255,255,255,0)",
        },
      },
      axisLine: {
        //指向外圈文本的分隔线样式
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          width: 1,
          color: "rgba(255,255,255,.2)",
        },
      },
    },
    series: [
      {
        name: "XXX区域占比",
        type: "radar",
        animationDuration: 2000,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              opacity: 1,
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              color: "#2EEFAD",
            },
          },
        },
        symbolSize: 0,
        lineStyle: {
          normal: {
            // color: 'rgba(252,211,3, 1)',
            width: 0,
          },
        },
        data: data,
      },
    ],
  };
  coverageChart.setOption(option);
  setInterval(function () {
    coverageChart.clear();
    coverageChart.setOption(option);
  }, 6000);
};
const drawContentChart = () => {
  var resArr = [
    { name: "测试11", value: 30 },
    { name: "测试22", value: 50 },
    { name: "测试55", value: 33 },
    { name: "测试66", value: 80 },
  ];
  var nameArr = [];
  var caiArr = [];
  var cunArr = [];
  var danArr = [];
  var junArr = [];
  var zhenArr = [];
  for (var i = 0; i < resArr.length; i++) {
    nameArr.push(resArr[i].name);
    caiArr.push(resArr[i].value);
    cunArr.push(resArr[i].value);
    danArr.push(resArr[i].value);
    junArr.push(resArr[i].value);
    zhenArr.push(resArr[i].value);
  }

  var contentChart = echarts.init(contentId.value);
  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      x: "35%",
      y: "0%",
      data: ["财务", "村务", "党务", "居务", "政务"],
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
      itemWidth: 10,
      itemHeight: 10,
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        data: nameArr,
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: 8,
            color: "rgba(255,255,255,.7)",
          },
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "单位：%",
        nameTextStyle: {
          color: "rgba(255,255,255,.7)",
          fontSize: 8,
        },
        max: 100,
        min: 0,
        boundaryGap: [0.2, 0.2],
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 8,
            // opacity: 0.1,
          },
        },
        splitLine: {
          //决定是否显示坐标中网格
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.2,
          },
        },
      },
      {
        type: "value",
        scale: true,
        show: false,
        // name: "销量额(万元)",
        nameTextStyle: {
          color: "rgba(255,255,255,.2)",
        },
        max: 1,
        min: 0,
        boundaryGap: [0.2, 0.2],
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.2)",
            // opacity: 0.1,
          },
        },
        splitLine: {
          //决定是否显示坐标中网格
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.2,
          },
        },
      },
    ],
    color: ["#0EFCFF", "#FD9133"],
    grid: {
      left: "5%",
      right: "1%",
      top: "25%",
      bottom: "15%",
      // containLabel: true
    },
    series: [
      {
        barWidth: "10%",
        name: "财务",
        type: "bar",
        data: caiArr,
      },
      {
        animationDuration: 2500,
        barWidth: "20%",
        name: "村务",
        type: "bar",
        data: cunArr,
      },
      {
        animationDuration: 2500,
        barWidth: "20%",
        name: "党务",
        type: "bar",
        data: danArr,
      },
      {
        animationDuration: 2500,
        barWidth: "20%",
        name: "居务",
        type: "bar",
        data: junArr,
      },
      {
        animationDuration: 2500,
        barWidth: "20%",
        name: "政务",
        type: "bar",
        data: zhenArr,
      },
    ],
  };
  contentChart.setOption(option);
  setInterval(function () {
    contentChart.clear();
    contentChart.setOption(option);
  }, 6000);
};
const drawPublicNumChart = () => {
  var resArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
    { name: "测试66", value: 800 },
  ];
  var xunArr = [];
  var jingArr = [];
  var dateArr = [];
  for (var i = 0; i < resArr.length; i++) {
    xunArr.push(resArr[i].value);
    jingArr.push(resArr[i].value);
    dateArr.push(resArr[i].name);
  }
  var publicNumChart = echarts.init(publicNumId.value);
  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      x: "35%",
      y: "0%",
      data: ["巡察", "警示"],
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
      itemWidth: 10,
      itemHeight: 10,
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: 8,
            color: "rgba(255,255,255,.7)",
          },
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "单位：%",
        nameTextStyle: {
          color: "rgba(255,255,255,.7)",
          fontSize: 8,
        },
        max: 1000,
        min: 0,
        boundaryGap: [0.2, 0.2],
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 8,
            // opacity: 0.1,
          },
        },
        splitLine: {
          //决定是否显示坐标中网格
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.2,
          },
        },
      },
      {
        type: "value",
        scale: true,
        show: false,
        // name: "销量额(万元)",
        nameTextStyle: {
          color: "rgba(255,255,255,.2)",
        },
        max: 1,
        min: 0,
        boundaryGap: [0.2, 0.2],
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.2)",
            // opacity: 0.1,
          },
        },
        splitLine: {
          //决定是否显示坐标中网格
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.2,
          },
        },
      },
    ],
    color: ["#2E8CFF", "#38EB70"],
    grid: {
      left: "5%",
      right: "1%",
      top: "25%",
      bottom: "15%",
      // containLabel: true
    },
    series: [
      {
        animationDuration: 2500,
        barWidth: "20%",
        name: "巡察",
        type: "bar",
        data: xunArr,
      },
      {
        barWidth: "20%",
        name: "警示",
        type: "bar",
        data: jingArr,
      },
    ],
    animationEasing: "cubicOut",
  };
  publicNumChart.setOption(option);
  setInterval(function () {
    publicNumChart.clear();
    publicNumChart.setOption(option);
  }, 6000);
};
const drawYearsNumChart = () => {
  var resArr = [
    { name: "测试11", value: 30 },
    { name: "测试22", value: 50 },
    { name: "测试33", value: 40 },
    { name: "测试44", value: 35 },
    { name: "测试55", value: 36 },
    { name: "测试66", value: 80 },
  ];
  var nameArr = [];
  var caiArr = [];
  var cunArr = [];
  var danArr = [];
  var junArr = [];
  var zhenArr = [];
  for (var i = 0; i < resArr.length; i++) {
    nameArr.push(resArr[i].name);
    caiArr.push(resArr[i].value);
    cunArr.push(resArr[i].value);
    danArr.push(resArr[i].value);
    junArr.push(resArr[i].value);
    zhenArr.push(resArr[i].value);
  }
  var yearsNumChart = echarts.init(yearsNumId.value);
  var spNum = 5,
    _max = 100;
  var y_data = nameArr.reverse();
  var _datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
    _data1 = caiArr.reverse(),
    _data2 = cunArr.reverse(),
    _data3 = danArr.reverse(),
    _data4 = junArr.reverse(),
    _data5 = zhenArr.reverse();
  var fomatter_fn = function (v) {
    return ((v.value / _max) * 100).toFixed(0);
  };
  var _label = {
    normal: {
      show: true,
      position: "inside",
      formatter: fomatter_fn,
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
    },
  };
  var option = {
    grid: {
      containLabel: true,
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      show: true,
      backgroundColor: "#fff",
      borderColor: "#ddd",
      borderWidth: 1,
      textStyle: {
        color: "#3c3c3c",
        fontSize: 16,
      },
      extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)",
    },
    xAxis: {
      splitNumber: spNum,
      interval: _max / spNum,
      max: _max,
      axisLabel: {
        show: false,
        formatter: function (v) {
          var _v = ((v / _max) * 100).toFixed(0);
          return _v == 0 ? _v : _v + "%";
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        data: y_data,
        axisLabel: {
          fontSize: 8,
          color: "rgba(255,255,255,.7)",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        show: false,
        data: y_data,
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "bar",
        name: "财务",
        stack: "2",
        label: _label,
        legendHoverLink: false,
        barWidth: 7,
        itemStyle: {
          normal: {
            color: "#FD9133",
          },
          emphasis: {
            color: "#FD9133",
          },
        },
        data: _data1,
      },
      {
        type: "bar",
        name: "村务",
        stack: "2",
        legendHoverLink: false,
        barWidth: 20,
        label: _label,
        itemStyle: {
          normal: {
            color: "#2E8CFF",
          },
          emphasis: {
            color: "#2E8CFF",
          },
        },
        data: _data2,
      },
      {
        type: "bar",
        stack: "2",
        name: "党务",
        legendHoverLink: false,
        barWidth: 20,
        label: _label,
        itemStyle: {
          normal: {
            color: "#37D2D4",
          },
          emphasis: {
            color: "#37D2D4",
          },
        },
        data: _data3,
      },
      {
        type: "bar",
        stack: "2",
        name: "居务",
        legendHoverLink: false,
        barWidth: 20,
        label: _label,
        itemStyle: {
          normal: {
            color: "#19CA88",
          },
          emphasis: {
            color: "#19CA88",
          },
        },
        data: _data4,
      },
      {
        type: "bar",
        stack: "2",
        name: "政务",
        legendHoverLink: false,
        barWidth: 20,
        label: _label,
        itemStyle: {
          normal: {
            color: "#0EFCFF",
          },
          emphasis: {
            color: "#0EFCFF",
          },
        },
        data: _data5,
      },
    ],
  };
  yearsNumChart.setOption(option);
  setInterval(function () {
    yearsNumChart.clear();
    yearsNumChart.setOption(option);
  }, 6000);
};
</script>

<style lang="scss" scoped>
::v-deep(.row-item) {
  color: white;
  font-size: 0.7vw !important;
  background: none !important;
}
::v-deep(.dv-scroll-board .rows .ceil) {
  padding: 0;
  text-align: left;
}
::v-deep(.dv-scroll-board .rows .ceil:nth-child(2)) {
  text-align: right;
}
</style>
